<template>
  <div style="margin: 20px" />
  <el-form label-width="auto" :model="userInfo" style="max-width: 600px">
    <el-form-item label="用户名">
      <el-input v-model="userInfo.username" class="myInput" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="userInfo.loginpass" />
    </el-form-item>
    <el-form-item>
      <el-button class="loginBtn" type="primary" @click="loginCheck">
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { loginApi } from "~/admins";
import { ElMessage } from "element-plus";
import {getCurrentRoutes} from "@/grants/routes"

//在组合式api中，如果想要拿到路由对象，使用hooks ，useRouter

const userInfo = reactive({
  username: "admin",
  loginpass: "123456",
});

const $router = useRouter();

const loginCheck = () => {
  console.log("userInfo", userInfo);

  // 发送请求：
  loginApi({
    adminname: userInfo.username,
    password: userInfo.loginpass,
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "登录成功",
        type: "success",
        duration: 1000,
      });
      // 1、存用户名
      localStorage.setItem("username", userInfo.username);
      // 2、存token
      localStorage.setItem("token", res.data.data.token);
      // 3、存储权限数据：
      sessionStorage.setItem("checkedkeys",JSON.stringify(res.data.data.checkedkeys));

      // 动态路由添加
      getCurrentRoutes();

      $router.push("/Admin");
    } else if (res.data.code === "10003") {
      ElMessage.error("密码错误");
    } else if (res.data.code === "10005") {
      ElMessage.error("用户名错误");
    } else {
      alert("这是不可能的");
    }
  });
};

</script>

<style scoped lang="scss">
.myInput {
  border: 5px solid red;
}

.loginBtn {
  background-color: yellow;
  border: 10px solid red;
  box-sizing: content-box;
}

::v-deep .el-input__wrapper {
  box-shadow: none;
}
</style>
